<template>
  <!-- 监听modal框的取消和确定事件 -->
  <!-- 传入title标题 -->
  <!-- 传入是否需要打开 -->
  <a-modal
    :open="props.isOpen"
    @cancel="cancel"
    @ok="handleOk"
    :title="props.editData.id ? '编辑' : '新增'"
  >
    <a-form ref="formRef" :model="addObj">
      <a-form-item
        :rules="[
          { required: true, message: '请填写借款人' },
          { max: 5, message: '借款人最多输入五个字符' },
        ]"
        label="借款人"
        name="borrower"
      >
        <a-input v-model:value="addObj.borrower" />
      </a-form-item>
      <a-form-item
        :rules="[
          { required: true, message: '请填写借款金额' },
          { len: 3, message: '借款金额必须输入三位数' },
        ]"
        label="借款金额"
        name="amount"
      >
        <a-input v-model:value="addObj.amount" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, defineProps, watchEffect } from "vue";
import { createLoan, updateLoan } from "../../../service/loans";
import { message } from "ant-design-vue";

// 内部逻辑
// 1. 需要父组件传入编辑数据（editData，因为子组件不能直接修改父组件数据，
//  所以通过watchEffect监听editData的变化，将editData赋值给内部的addObj）
// 2. 需要父组件确定是否打开(isOpen)
// 3. 点击取消的时候,emit时间出去，让父组件关闭modal框，并清除传入的editObj，并清除子组件内部的校验情况
// 4. 点击确认的时候，通过是否有id判断是新增还是编辑，然后调用对应的接口，成功后提示用户
// emit成功事件，让父组件刷新列表，并让父组件清除传入的editObj

const props = defineProps({
  editData: {
    type: Object,
  },
  isOpen: {
    type: Boolean,
    required: true,
  },
});

// 获取表格的实例，以方便调用表格上的校验和重置方法
const formRef = ref(null);
const emit = defineEmits(["success", "cancel"]);

// 点击模态框的取消按钮触发的方法
const cancel = () => {
  // 通知父组件点击了取消
  emit("cancel");
  // 重置表单状态
  formRef.value.resetFields();
};

// 组件内部用来存储表单数据的对象
const addObj = ref({});

// 每当 props.editData变化时，更新addObj，通过watchEffect方法来进行观察
watchEffect(() => {
  // 这里一定记得用解构
  addObj.value = { ...props.editData };
});

// 点击模态框的确认按钮触发的方法
const handleOk = async () => {
  // 对数据进行校验
  await formRef.value.validateFields();
  // 通过数据是否有id，来判断是新增还是编辑
  const isEdit = !!addObj.value.id;
  // 如果是编辑
  if (isEdit) {
    // 调用编辑接口
    await updateLoan(addObj.value);
    // 提示用户成功添加
    message.success("编辑成功！");
  } else {
    // 如果是新增
    // 调用新增接口
    // 校验成功后请求后端接口（新增）
    await createLoan(addObj.value);
    // 提示用户成功添加
    message.success("新增成功！");
  }
  //  告诉父组件，已经新增或编辑成功
  emit("success");
  // 重置表单数据
  formRef.value.resetFields();
};
// 下面是编辑的流程
// 1. 点击编辑按钮
// 2. 填充数据
// 3. 修改数据并提交
// 4. 提示用户成功
// 5. 刷新列表
// 6. 清除数据
</script>

<style></style>
